<!DOCTYPE html>
<!-- saved from url=(0068)http://jquerydebugger.moonsitesoftware.com/index.php/tutorials/data/ -->
<html dir="ltr" lang="en-US"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title>jQuery Debugger » How To Use – Tutorial – jQuery Data</title>
<link rel="stylesheet" media="all" href="./jQuery Debugger » How To Use – Tutorial – jQuery Data_files/style.css">
<link rel="pingback" href="http://jquerydebugger.moonsitesoftware.com/xmlrpc.php">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="alternate" type="application/rss+xml" title="jQuery Debugger » Feed" href="http://jquerydebugger.moonsitesoftware.com/index.php/feed/">
<link rel="alternate" type="application/rss+xml" title="jQuery Debugger » Comments Feed" href="http://jquerydebugger.moonsitesoftware.com/index.php/comments/feed/">

            <script type="text/javascript" async="" src="./jQuery Debugger » How To Use – Tutorial – jQuery Data_files/ga.js"></script><script type="text/javascript">//<![CDATA[
            // Google Analytics for WordPress by Yoast v4.3.3 | http://yoast.com/wordpress/google-analytics/
            var _gaq = _gaq || [];
            _gaq.push(['_setAccount', 'UA-29383238-2']);
				            _gaq.push(['_trackPageview']);
            (function () {
                var ga = document.createElement('script');
                ga.type = 'text/javascript';
                ga.async = true;
                ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';

                var s = document.getElementsByTagName('script')[0];
                s.parentNode.insertBefore(ga, s);
            })();
            //]]></script>
			<link rel="alternate" type="application/rss+xml" title="jQuery Debugger » How To Use – Tutorial – jQuery Data Comments Feed" href="http://jquerydebugger.moonsitesoftware.com/index.php/tutorials/data/feed/">
<script type="text/javascript" src="./jQuery Debugger » How To Use – Tutorial – jQuery Data_files/jquery.js"></script>
<script type="text/javascript" src="./jQuery Debugger » How To Use – Tutorial – jQuery Data_files/js_quicktags.js"></script>
<script type="text/javascript" src="./jQuery Debugger » How To Use – Tutorial – jQuery Data_files/comment-reply.js"></script>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://jquerydebugger.moonsitesoftware.com/xmlrpc.php?rsd">
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://jquerydebugger.moonsitesoftware.com/wp-includes/wlwmanifest.xml"> 
<link rel="prev" title="Contact Us" href="http://jquerydebugger.moonsitesoftware.com/index.php/contact-us/">
<link rel="next" title="How To Use – Tutorial – jQuery Events" href="http://jquerydebugger.moonsitesoftware.com/index.php/tutorials/events/">
<meta name="generator" content="WordPress 3.3.2">
<link rel="canonical" href="./jQuery Debugger » How To Use – Tutorial – jQuery Data_files/jQuery Debugger » How To Use – Tutorial – jQuery Data.html">
<link rel="stylesheet" href="./jQuery Debugger » How To Use – Tutorial – jQuery Data_files/visual-form-builder.css" type="text/css"><link media="all" type="text/css" href="./jQuery Debugger » How To Use – Tutorial – jQuery Data_files/jquery-ui.css" rel="stylesheet"><style>#site-name,#site-name a,#tagline{color:#b9d8f2}</style><script>var $ = jQuery;</script>
</head>

<body class="page page-id-66 page-child parent-pageid-253 page-template-default singular">

<div id="wrap">
	<div id="header">
		
<div id="logo"><a href="http://jquerydebugger.moonsitesoftware.com/"><img src="./jQuery Debugger » How To Use – Tutorial – jQuery Data_files/icon_and_title2.png" width="240" height="60" alt="jQuery Debugger"></a></div>					</div>
	
	<div id="menu-top" class="menu-main-menu-container"><ul id="menu-main-menu" class="menu"><li id="menu-item-40" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-40"><a href="http://jquerydebugger.moonsitesoftware.com/">Home</a></li>
<li id="menu-item-28" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-28"><a href="http://jquerydebugger.moonsitesoftware.com/index.php/features/">Features</a></li>
<li id="menu-item-29" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-29"><a target="_blank" href="https://chrome.google.com/webstore/detail/dbhhnnnpaeobfddmlalhnehgclcmjimi/" onclick="javascript:_gaq.push([&#39;_trackEvent&#39;,&#39;outbound-menu&#39;,&#39;http://chrome.google.com&#39;]);">Install Now!</a></li>
<li id="menu-item-265" class="menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor current-menu-ancestor current-menu-parent current-page-parent current_page_parent current_page_ancestor menu-item-265"><a href="http://jquerydebugger.moonsitesoftware.com/index.php/tutorials/">Tutorials</a>
<ul class="sub-menu">
	<li id="menu-item-361" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-361"><a href="http://jquerydebugger.moonsitesoftware.com/index.php/tutorials/selector_inspector/">Selector Inspector</a></li>
	<li id="menu-item-273" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-273"><a href="http://jquerydebugger.moonsitesoftware.com/index.php/tutorials/events/">jQuery Events</a></li>
	<li id="menu-item-274" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-66 current_page_item menu-item-274"><a href="./jQuery Debugger » How To Use – Tutorial – jQuery Data_files/jQuery Debugger » How To Use – Tutorial – jQuery Data.html">jQuery Data</a></li>
</ul>
</li>
<li id="menu-item-56" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-56"><a href="http://jquerydebugger.moonsitesoftware.com/index.php/contact-us/">Contact Us</a></li>
<li id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-27"><a href="http://jquerydebugger.moonsitesoftware.com/index.php/faq/">FAQ</a></li>
<li id="menu-item-26" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-26"><a href="http://jquerydebugger.moonsitesoftware.com/index.php/about/">About</a></li>
</ul></div>
	<div id="page" role="document">
<div id="content">


	<div id="intro">
		<h1>How To Use – Tutorial – jQuery Data</h1>							</div>

	<div id="post-66" class="post-66 page type-page status-publish hentry entry">

	
	
	<div class="entry-content">
	<p><script type="text/javascript" src="./jQuery Debugger » How To Use – Tutorial – jQuery Data_files/jquery.cycle_.all_.js"></script><script type="text/javascript" src="./jQuery Debugger » How To Use – Tutorial – jQuery Data_files/jquery.easing.1.3.js"></script><script type="text/javascript" src="./jQuery Debugger » How To Use – Tutorial – jQuery Data_files/tutorial.js"></script>If you don’t know what jQuery Data is, <a title="The Power of JQuery .data() and a Practical Example" href="http://apheliondynamics.com/blog/2010/01/19/the-power-of-jquery-data-and-a-practical-example/" onclick="javascript:_gaq.push([&#39;_trackEvent&#39;,&#39;outbound-article&#39;,&#39;http://apheliondynamics.com&#39;]);" target="_blank">watch this!</a></p>
<div id="popup">
<div class="popup-top">
<ul>
<li style="width: 43px;"><a class="popup-prev" style="display: none;">prev</a></li>
<li class="popup-title">Stage 1 - Open the Developer Tools</li>
<li style="width: 43px;"><a class="popup-next">next</a></li>
</ul>
</div>
<div class="popup-content" style="position: relative; overflow: visible;">
<div data-title="Open the Developer Tools" style="position: absolute; top: 0px; left: 0px; display: block; z-index: 3; opacity: 1;">
<div class="text">
<p>Open the Developer Tools by pressing <kbd>Control+Shift+I</kbd> (on Mac:<kbd>⌥⌘I</kbd>).</p>
<p>Than go to the Element panel.</p>
</div>
<p><img class="alignnone size-full wp-image-4 mouseZoom" src="./jQuery Debugger » How To Use – Tutorial – jQuery Data_files/11.png" alt=""><br>
<span class="mouseZoomSubtext">hover over the image to zoom it</span></p>
</div>
<div data-title="Inspect Element" style="position: absolute; top: 0px; left: 0px; display: none; z-index: 2;">
<div class="text">
<p>Toggle Inspect Element mode by clicking <img src="./jQuery Debugger » How To Use – Tutorial – jQuery Data_files/img001.png" alt=""> in the bottom strip of the panel.</p>
<p>Select a square to inspect from the squares in the demo below.</p>
</div>
<p><img class="alignnone size-full wp-image-4 mouseZoom" src="./jQuery Debugger » How To Use – Tutorial – jQuery Data_files/21.png" alt=""><br>
<span class="mouseZoomSubtext">hover over the image to zoom it</span></p>
</div>
<div data-title="Open jQuery Data Sidebar" style="position: absolute; top: 0px; left: 0px; display: none; z-index: 1;">
<div class="text">
<p>Open the jQuery Data sidebar.</p>
<p>In the sidebar you can see the selected element’s data, which can be either <a title="HTML5 Custom Data Attributes (data-*)" href="http://html5doctor.com/html5-custom-data-attributes/" onclick="javascript:_gaq.push([&#39;_trackEvent&#39;,&#39;outbound-article&#39;,&#39;http://html5doctor.com&#39;]);" target="_blank">HTML5 data attribute</a> or <a title="jQuery .data()" href="http://api.jquery.com/data/" onclick="javascript:_gaq.push([&#39;_trackEvent&#39;,&#39;outbound-article&#39;,&#39;http://api.jquery.com&#39;]);" target="_blank">jQuery data function</a>.</p>
</div>
<p><img class="alignnone size-full wp-image-4 mouseZoom" src="./jQuery Debugger » How To Use – Tutorial – jQuery Data_files/31.png" alt=""><br>
<span class="mouseZoomSubtext">hover over the image to zoom it</span></p>
</div>
</div>
</div>
<div id="demo"><span id="demoTitle">demo</span><br>
<button id="addNewSquare">add new square</button><button id="toggleAll">toggle all</button><span> * click on the squares</span><p></p>
<div id="demoContainer"><span style="top: 0px; background: rgb(255, 0, 0);"></span><span style="top: 0px; background: rgb(255, 127, 0);"></span><span style="top: 0px; background: rgb(255, 255, 0);"></span><span style="top: 0px; background: rgb(128, 255, 0);"></span><span style="top: 0px; background: rgb(0, 255, 0);"></span><span style="top: 9px; background: rgb(0, 255, 128);"></span><span style="top: 48px; background: rgb(0, 255, 255);"></span><span style="top: 57px; background: rgb(0, 127, 255);"></span><span style="top: 20px; background: rgb(0, 0, 255);"></span><span style="top: 0px; background: rgb(127, 0, 255);"></span><span style="top: 0px; background: rgb(255, 0, 255);"></span><span style="top: 0px; background: rgb(255, 0, 128);"></span><span style="top: 0px; background: rgb(255, 0, 0);"></span><span style="top: 0px; background: rgb(255, 127, 0);"></span><span style="top: 0px; background: rgb(255, 255, 0);"></span><span style="top: 0px; background: rgb(128, 255, 0);"></span><span style="top: 0px; background: rgb(0, 255, 0);"></span><span style="top: 0px; background: rgb(0, 255, 128);"></span><span style="top: 0px; background: rgb(0, 255, 255);"></span><span style="top: 0px; background: rgb(0, 127, 255);"></span></div>
</div>
<p><code><span class="codeTitle">code</span><br>$(function(){<br>
<span class="newline"><span class="remarke">//register event handler: toggle span position on click.</span><br>
$("#demoContainer").delegate('span','click',function(){<br>
<span class="newline">if($(this).data('toggle') == 1)<span class="remarke">//if the span is up</span><br>
<span class="newline">$(this).animate({'top':$(this).data('top')}).data('toggle',0);</span><br>
else <span class="remarke">//else (the span is down)</span><br>
<span class="newline">$(this).animate({'top':'0px'}).data('toggle',1);</span></span><br>
<span class="spaceLine">});</span><br>
var index = 0;<br>
<span class="remarke">//register event handler: create new span on click</span><br>
$("#addNewSquare").click(function(){<br>
<span class="newline"><span class="remarke">//generate color</span><br>
<span class="spaceLine">var color = 'hsl('+ index*30 +', 100%, 50%)';</span><br>
<span class="remarke">//generate position</span><br>
<span class="spaceLine">var x = Math.round(Math.sin(index*30+11)*30+30);</span><br>
<span class="remarke">//create the span and append it</span><br>
<span class="spaceLine">$('&lt;span&gt;').appendTo("#demoContainer")<span class="newline spaceLine">.data({top:x,index:index})</span><span class="newline spaceLine">.css({top:x,background:color});</span></span><br>
index++;</span><br>
<span class="spaceLine">});</span><br>
<span class="remarke">//register event handler: toggle all spans on click</span><br>
$("#toggleAll").click(function(){<br>
<span class="newline">$("#demoContainer span").click();</span><br>
});</span><br>
});</code></p>
	</div><!--entry-content-->

	
	
	</div><!--entry-->



<!--?/*php comments_template( '', true ); */?-->

</div><!--content-->

<div class="clear"></div>


</div><!-- #page -->

<div id="page-footer"></div>


</div><!-- wrap -->

<div id="menu-bottom" class="menu-footer-menu-container"><ul id="menu-footer-menu" class="menu" role="navigation"><li id="menu-item-24" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-24"><a href="http://jquerydebugger.moonsitesoftware.com/index.php/features/">Features</a></li>
<li id="menu-item-25" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-25"><a target="_blank" href="https://chrome.google.com/webstore/detail/dbhhnnnpaeobfddmlalhnehgclcmjimi" onclick="javascript:_gaq.push([&#39;_trackEvent&#39;,&#39;outbound-menu&#39;,&#39;http://chrome.google.com&#39;]);">Install Now!</a></li>
<li id="menu-item-266" class="menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor current-menu-ancestor current-menu-parent current-page-parent current_page_parent current_page_ancestor menu-item-266"><a href="http://jquerydebugger.moonsitesoftware.com/index.php/tutorials/">Tutorials</a></li>
<li id="menu-item-55" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-55"><a href="http://jquerydebugger.moonsitesoftware.com/index.php/contact-us/">Contact Us</a></li>
<li id="menu-item-22" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-22"><a href="http://jquerydebugger.moonsitesoftware.com/index.php/about/">About</a></li>
</ul></div>
<div id="footerBar"><span>©2012 </span><a style="text-decoration: underline;" href="http://jquerydebugger.moonsitesoftware.com/index.php/about/">jQuery Debugger</a><br><br><span>hosted by <a href="http://moonsite.co.il/" target="_blank" onclick="javascript:_gaq.push([&#39;_trackEvent&#39;,&#39;outbound-menu&#39;,&#39;http://moonsite.co.il&#39;]);">Moonsite</a></span></div>

<script type="text/javascript" src="./jQuery Debugger » How To Use – Tutorial – jQuery Data_files/jquery.validate.min.js"></script>
<script type="text/javascript" src="./jQuery Debugger » How To Use – Tutorial – jQuery Data_files/jquery-ui.min.js"></script>
<script type="text/javascript" src="./jQuery Debugger » How To Use – Tutorial – jQuery Data_files/visual-form-builder-validate.js"></script>
<script type="text/javascript" src="./jQuery Debugger » How To Use – Tutorial – jQuery Data_files/jquery.metadata.js"></script>
<!--[if IE 8]>
<script>
var imgs, i, w;
var imgs = document.getElementsByTagName( 'img' );
for( i = 0; i < imgs.length; i++ ) {
	w = imgs[i].getAttribute( 'width' );
	if ( 615 < w ) {
		imgs[i].removeAttribute( 'width' );
		imgs[i].removeAttribute( 'height' );
	}
}
</script>
<![endif]-->

</body></html>